<template>
	<view>
		<my-home v-show="showCommponent && component==='home'" ref="home" :param="param" :isShowChart="isShowChart">
		</my-home>
		<device-list v-show="showCommponent && component==='device'" ref="device" :param="param">
		</device-list>
		<project-list v-show="showCommponent && component==='project'" ref="project" :param="param">
		</project-list>
		<device-map v-show="showCommponent && component==='map'" ref="map" :param="param">
		</device-map>
		<center v-show="showCommponent && component==='center'" ref="center" :param="param"></center>
		<tabbar v-if="showTabbar" ref="tabbar" :tabbarList='tabbarList' :component='component' @navChange="navChange">
		</tabbar>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import MyHome from './components/MyHome'
	import ProjectList from './components/ProjectList'
	import DeviceList from './components/DeviceList'
	import DeviceMap from './components/DeviceMap'
	import Center from './components/Center'
	import Tabbar from '@/components/ztn-custom/Tabbar'
	import {
		nextTick
	} from 'vue'
	import * as storage from '@/util/storage'
	import * as loginApi from '@/api/dmIot/loginApi.ts'
	export default {
		name: 'Nav',
		components: {
			MyHome,
			DeviceList,
			ProjectList,
			DeviceMap,
			Center,
			Tabbar
		},
		data() {
			return {
				param:null,
				component: 'home',
				tabbarList: [{
						component: 'home',
						name: '主页',
						icon: 'home_fill'
					},
					{
						component: 'device',
						name: '设备列表',
						icon: 'list_fill'
					},
					{
						component: 'project',
						name: '项目列表',
						icon: 'layers_fill'
					},
					{
						component: 'map',
						name: '设备地图',
						icon: 'map_fill'
					},
					{
						component: 'center',
						name: '我的',
						icon: 'person_fill'
					}
				],
				isShowChart: true,
				showCommponent: false,
				showTabbar: true,
				userId: storage.getUserId(),
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		watch:{
			component(val) {
				if(val === "home"){
					this.isShowChart = true
				}else{
					this.isShowChart = false
				}
			}
		},
		onLoad(option) {
			// if (option && option.component) {
			// 	this.component = option.component
			// }
			// this.init()
			this.showCommponent = true
			this.component = "home"
			this.getInfo()
		},
		onShow() {
			uni.$on("navChange", (component,param) => {
				this.param = param
				this.navChange(component,param)
			});
		},
		onUnload() {
			uni.$off('navChange');
		},
		methods: {
			getInfo() {
				loginApi.getInfo().then((res) => {
					const {
						permissions,
						success
					} = res
					if (success) {
						storage.setPermissions(JSON.stringify(permissions))
					}
				})
			},
			navChange(component) {
				const lastComponent = this.component
				if (lastComponent !== component) {
					this.component = component
				} else {
					this.$refs[component].init()
					showToast(this.$t('refresh'), 'none', 1000, false)
				}
			},
		},
		onShareAppMessage(res) {
			return {
				title: `中泰能`,
				path: `/pages/login/login`,
				success: (res) => {
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: white;
	}
</style>
